import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class ProductPage extends StatefulWidget {
  const ProductPage({super.key});

  @override
  State<ProductPage> createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  final ScrollController _scrollController = ScrollController();
  var arguments;

  @override
  void initState() {
    arguments = Get.arguments;
    print("接收到路由传值为:$arguments");
    _scrollController.addListener(() {
      var scrollHeight = _scrollController.position.pixels;
      var maxHeight =  _scrollController.position.maxScrollExtent;
      if(scrollHeight > maxHeight - 20){
        //TODO http请求加载更多数据
        print("加载更多");
      }
    });
  }


  Widget _showIcon(){
    return const Icon(Icons.arrow_drop_down);
  }


  Widget _prodListWidget() {
    return Container(
      padding: EdgeInsets.all(10.w),
      margin: EdgeInsets.only(top: 80.h),
      child: ListView.builder(
          controller: _scrollController,
          itemCount: 10,
          itemBuilder: (context,index){
            return Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      width: 180.w,
                      height: 180.h,
                      child: Image.network("https://www.itying.com/images/flutter/list2.jpg",fit: BoxFit.cover),
                    ),
                    Expanded(
                        flex: 1,
                        child: Container(
                          height: 180.h,
                          margin: EdgeInsets.only(left: 10.w),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                  "戴尔(DELL)灵越3670 英特尔酷睿i5 高性能 台式电脑整机(九代i5-9400 8G 256G)",
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis
                              ),
                              Row(
                                children: <Widget>[
                                  Container(
                                    height: 32.h,
                                    margin: EdgeInsets.only(right: 10.w),
                                    padding: EdgeInsets.fromLTRB(10.w, 2.h, 10.w, 0),

                                    //注意 如果Container里面加上decoration属性，这个时候color属性必须得放在BoxDecoration
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: const Color.fromRGBO(230, 230, 230, 0.9),

                                    ),
                                    child: const Text("4g"),
                                  ),
                                  Container(
                                    height: 32.h,
                                    margin: EdgeInsets.only(right: 10.w),
                                    padding: EdgeInsets.fromLTRB(10.w, 2.h, 10.w, 0),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: const Color.fromRGBO(230, 230, 230, 0.9),
                                    ),
                                    child: const Text("126"),
                                  ),
                                ],
                              ),
                              const Text("￥999",style: TextStyle(color: Colors.red,fontSize: 16))
                            ],
                          ),
                        )
                    )
                  ],
                ),
                Divider(height: 20.h),
              ],
            );
          }
      ),
    );
  }

  Widget _subHeaderWidget(){
    return Positioned(
        top: 0,
        height: 80.h,
        width: 750.w,
        child: Container(
          height: 80.h,
          width: 750.w,
          decoration: const BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      width: 1,
                      color: Color.fromRGBO(233, 233, 233, 0.9)
                  )
              )
          ),
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: InkWell(
                  child:Padding(
                    padding: EdgeInsets.fromLTRB(0, 20.h, 0, 20.h),
                    child: const Text("综合",
                        textAlign:TextAlign.center,
                        style: TextStyle(
                            color: Colors.red
                        )
                    ),
                  ) ,
                  onTap: (){

                  },
                ),
              ),
              Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20.h, 0, 20.h),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text("销量",
                            textAlign:TextAlign.center,
                            style: TextStyle(
                                color: Colors.black
                            )
                        ),
                        _showIcon()
                      ],
                    )
                  ) ,
                  onTap: (){

                  },
                ),
              ),
              Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20.h, 0, 20.h),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text("价格",
                            textAlign:TextAlign.center,
                            style: TextStyle(
                                color: Colors.black
                            )
                        ),
                        _showIcon()
                      ],
                    )
                  ) ,
                  onTap: (){

                  },
                ),
              ),
              Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20.h, 0, 20.h),
                    child: const Text("筛选",
                        textAlign:TextAlign.center,
                        style: TextStyle(
                            color: Colors.black
                        )
                    ),
                  ) ,
                  onTap: (){
                    //通过globalKey来打开侧边栏
                    _scaffoldKey.currentState!.openEndDrawer();
                  },
                ),
              ),
            ],
          ),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(750, 1334));

    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text("商品列表"),
        // leading: const Text(""),
        actions: const [
          Text("")
        ],
      ),
      endDrawer: Drawer(
        child: Text("实现筛选功能"),
      ),
      body: Stack(
        children: [
          _prodListWidget(),
          _subHeaderWidget(),
        ],
      )
    );
  }


}
